<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">收货人</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" name="username"
						v-model="username" />
				</view>
				<view class="item">
					<view class="left">手机号码</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" name="userphone"
						v-model="userphone" />
				</view>
				<!-- 底部弹窗的选择器 -->
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="location"
						v-model="location" />
				</view>
				<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
					@confirm="onConfirm($event,'region')" ref="region"></regionPicker>


				<view class="item address">
					<view class="left">详细地址</view>
					<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" name="useraddress"
						v-model="useraddress" />
				</view>
				<!-- <view class="site-clipboard">
					<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
					<view class="clipboard">
						地址粘贴板
						<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
					</view>
				</view> -->
			</view>
			<view class="bottom">
				<view class="tag">
					<view class="left">标签</view>
					<view class="right">
						<u-radio-group v-model="label" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="default">
					<view class="left">
						<view class="set">设置默认地址</view>
						<view class="tips">提醒：每次下单会默认推荐该地址</view>
					</view>
					<view class="right">
						<switch color="red"  name="status" :checked="status" />
					</view>
				</view>
			</view>

			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入提示模块 
	let {
		load,
		hideload,
		isLogin,
		tip
	} = require('@/utils/tip.js');
	let app = getApp();
	import regionPicker from "@/components/region/w-picker.vue";

	export default {
		components: {
			regionPicker
		},

		data() {
			return {
				regionVisible: false, //初始化地区选择器开关	
				username: '', //初始化收件人姓名
				userphone: '', //初始化收件人手机号
				useraddress: '', //初始化收件人详情地址
				location: '山东省滨州市无棣县', //初始化地区默认值
				label: '家', //初始化地址标签
				list: [{
						name: '家'
					},
					{
						name: '公司'
					},
					{
						name: '学校'
					}
				],
				status: false,
			};
		},
		onLoad(option) {
			
			this.getAddress();
		},
		methods: {
			// 1.获取默认值
			async getAddress() {
				let  app =  getApp();
				let id = this.$mp.query.id;//获取条件id
				let header = app.globalData.header;
				let uid = app.globalData.userInfo.uid;
				
				var option = {
					url:"addresslist",
					data:{uid,id},
					header,
				}
				let res =  await this.$http(option);
				console.log(res)
				if (res.data.code == 403) {
					// 登录过期
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.reLaunch({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.reLaunch({
									url: "../index/index"
								})
							}
						}
					})
				}else{
					//   res.data.list[0]
					let address =  res.data.list[0];
					this.username = address.username;
					this.useraddress =address.useraddress;
					this.userphone = address.userphone;
					this.location =address.location;
					this.label = address.label;
					this.status = address.status ==1 ? true  :false;
				} 
				
			},


			async submit(e) {
				let app = getApp();
				let id = this.$mp.query.id;//获取条件id
				let {
					location,
					status,
					useraddress,
					username,
					userphone
				} = e.mp.detail.value;
				let label = this.label;

				// 执行添加
				// api ： addressadd
				let header = app.globalData.header;
				var option = {
					url: "addressedit",
					data: {
						id,
						username,
						userphone,
						location,
						useraddress,
						label,
						status: status ? 1 : 0
					},
					header,
					method: "post"
				}
				let res = await this.$http(option);

				console.log(res)
				if (res.data.code == 403) {
					// 登录过期
					// 过期了
					this.$tips.restore(this, app);
					uni.showModal({
						title: res.data.msg,
						content: "您确定重新登录么？",
						success(result) {
							// console.log(res)
							if (result.confirm) {
								// 同意登录
								uni.reLaunch({
									url: "../user/user"
								})
							} else {
								// 不同意登录
								uni.reLaunch({
									url: "../index/index"
								})
							}
						}
					})
				} else if (res.data.code == 200) {
					// 查询成功
					this.$tips.showtoast('修改成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}
			},
			// 设置会员地区
			onConfirm(res) {
				this.location = res.result;
			},
			// 设置底子标签
			radioGroupChange(e) {
				// console.log(e)
				this.label = e; //选择的公司 家
			}

		}
	};
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/addsite.scss';
</style>
